/* global jQuery, document, window, envatoCustomSearch, envatoCustomSearchSettings */
jQuery(document).ready(function ($) {
// Constants and state
var defaultCategory = $('.dropdown-toggle').val();
var dataLayer = window.dataLayer || [];
var typingTimer = 0;
var doneTypingInterval = 300;
// Initialize the search functionality
function initializeSearch() {
setupEventListeners();
initAutocomplete();
setupMobileHandlers();
}
// Setup all event listeners
function setupEventListeners() {
$('#envato-search-form').on('submit', handleSearchSubmit);
$('#url-input').on('keypress', handleKeyPress);
$('.dropdown-toggle').on('click', handleDropdownToggle);
$('.dropdown-item').on('click', handleDropdownItemClick);
$('#url-input').on('input', handleInputChange);
$('.clear-input').on('click', handleClearInput);
$('.envato-custom-search').on('click', handleSearchClick);
$(document).on('click', handleDocumentClick);
$(document).on('mouseleave', '.dropdown-menu', handleDropdownMouseLeave);
$('#url-input').on('focus', handleInputFocus);
$(document).on('mousedown', '.ui-menu-item', handleMenuItemClick);
$(window).on('resize', handleWindowResize);
setupSearchTagsHandlers();
}
// Search form handlers
function handleSearchSubmit(e) {
e.preventDefault();
processSearch('free text');
}
function handleKeyPress(e) {
if (e.which === 13) {
e.preventDefault();
processSearch('free text');
}
}
// Dropdown handlers
function handleDropdownToggle(e) {
e.preventDefault();
$('.dropdown-menu').toggleClass('show');
}
function handleDropdownItemClick(e) {
e.preventDefault();
var selectedText = $(this).text().trim();
var selectedValue = $(this).data('value');
updateDropdownSelection(selectedText, selectedValue);
updateSearchTagsVisibility(selectedValue);
}
function updateDropdownSelection(selectedText, selectedValue) {
$('.dropdown-menu').removeClass('show');
updateDropdownItems(selectedText, selectedValue);
updateDropdownButton(selectedText, selectedValue);
}
function updateDropdownItems(selectedText, selectedValue) {
$('.dropdown-item').each(function () {
if ($(this).data('value') === selectedValue) {
$(this).html(
selectedText +
''
);
$(this).addClass('selected');
} else {
$(this).html($(this).text().trim());
$(this).removeClass('selected');
}
});
}
function updateDropdownButton(selectedText, selectedValue) {
var pluginUrl = envatoCustomSearch.pluginUrl;
$('#dropdownMenuButton').val(selectedValue);
$('.dropdown-toggle').html(
'' +
selectedText +
'
"
);
}
// Input handlers
function handleInputChange() {
$('.clear-input').toggle($(this).val() !== '');
}
function handleClearInput() {
$('#url-input').val('');
$('.clear-input').hide();
}
function handleSearchClick(e) {
e.stopPropagation();
$(this).addClass('is-focused');
$('.envato-custom-search').css('outline', '2px solid #fff');
}
function handleInputFocus() {
$('.dropdown-menu').removeClass('show');
if ($(this).val().trim() !== '') {
$(this).autocomplete('search', $(this).val());
}
}
// Document and window handlers
function handleDocumentClick(e) {
handleSearchFocus(e);
handleDropdownClose(e);
}
function handleSearchFocus(e) {
if (!$(e.target).closest('.envato-custom-search').length) {
$('.envato-custom-search').removeClass('is-focused');
$('.envato-custom-search').css('outline', '1px solid #383838');
setupSearchHoverEffects();
}
}
function setupSearchHoverEffects() {
$('.envato-custom-search').hover(
function () {
if (!$(this).hasClass('is-focused')) {
$(this).css('outline', '1px solid #707070');
}
},
function () {
if (!$(this).hasClass('is-focused')) {
$(this).css('outline', '1px solid #383838');
}
}
);
}
function handleDropdownClose(e) {
if (!$(e.target).closest('.dropdown-menu').length) {
$('.dropdown-menu').removeClass('show');
}
}
function handleDropdownMouseLeave() {
$('.dropdown-menu').removeClass('show');
}
// Autocomplete functionality
function initAutocomplete() {
var $input = $('#url-input');
if ($input.data('ui-autocomplete')) {
$input.autocomplete('destroy');
}
$input
.autocomplete({
minLength: 1,
appendTo: '.envato-custom-search',
position: {
my: 'left top+3',
at: 'left bottom',
of: $('.envato-custom-search')
},
source: handleAutocompleteSource,
open: handleAutocompleteOpen,
close: handleAutocompleteClose,
select: handleAutocompleteSelect
})
.keydown(handleAutocompleteKeydown)
.data('ui-autocomplete')._renderItem = renderAutocompleteItem;
}
function handleAutocompleteSource(request, response) {
clearTimeout(typingTimer);
typingTimer = setTimeout(function () {
var category = $('#dropdownMenuButton').val();
var url = 'https://autosuggest.aws.elements.envato.com/?keyword=' + request.term;
if (category !== 'all-items') {
url += '&itemType=' + category;
}
$.ajax({
url: url,
success: function (data) {
var suggestions = $.map(data, function (item) {
return {
label: item.term,
value: item.term
};
});
response(suggestions);
}
});
}, doneTypingInterval);
}
function handleAutocompleteOpen() {
$('.ui-autocomplete').css('min-width', $('.envato-custom-search').outerWidth() + 'px');
$('.envato-custom-search').css('border-radius', '16px 16px 0 0');
}
function handleAutocompleteClose() {
$('.envato-custom-search').css('border-radius', '50px');
}
function handleAutocompleteSelect(event, ui) {
event.preventDefault();
$('#url-input').val(ui.item.value);
if (ui.item.category) {
var matchingItem = $('.dropdown-item[data-value="' + ui.item.category + '"]');
if (matchingItem.length) {
$('#dropdownMenuButton').val(ui.item.category);
$('.dropdown-toggle').html(
matchingItem.text() +
'
'
);
}
}
processSearch('autocomplete');
$('#url-input').autocomplete('close').blur();
}
function handleAutocompleteKeydown(event) {
var $this = $(this);
var menu = $this.autocomplete('widget');
var items = menu.find('.ui-menu-item');
var active = menu.find('.ui-state-active');
if (event.key === 'Tab' && menu.is(':visible')) {
event.preventDefault();
if (active.length === 0) {
items.first().addClass('ui-state-active');
} else {
var next = active.next('.ui-menu-item');
active.removeClass('ui-state-active');
if (next.length) {
next.addClass('ui-state-active');
} else {
items.first().addClass('ui-state-active');
}
}
}
}
function handleMenuItemClick() {
var item = $(this).data('ui-autocomplete-item');
if (item) {
$('#url-input').val(item.value).trigger('change');
$('#url-input').autocomplete('close').blur();
processSearch('autocomplete');
}
}
function renderAutocompleteItem(ul, item) {
return $('